/**
* @Description: 订货分类 - 详情页面
* @author  tangbin
* @date 2023/3/12
*/

<template>
  <div class="mh100">
    <div class="page-container">
      <!-- <el-form ref="form" :model="form" :rules="rules" label-width="100px"> -->
        <div class="split-content-info" id="ruleTop">
          <!-- 标题 -->
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">基本信息</span>
            </div>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="3" border>
              <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="分类编号">{{ form.code }}</el-descriptions-item>
              <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="分类名称">{{ form.name }}</el-descriptions-item>
              <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="状态">{{ getStatus(form.status) }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
              <!-- <el-descriptions-item label=""></el-descriptions-item> -->
              <!-- <el-descriptions-item label=""></el-descriptions-item> -->
            </el-descriptions>
          </div>
        </div>

        <!-- 模块分割线 -->
        <div class="split-line"></div>
        <!-- 模块分割线 -->
        <div class="split-content-info" :style="{minHeight: height + 'px'}">
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">订货规则</span>
            </div>
          </div>
          <!-- <div class="clearfix" style="padding-right: 20px; padding-bottom: 10px">
            <el-button style="float: right;" type="primary" icon="el-icon-plus" size="small" @click="addRule">添加规则</el-button>
          </div> -->
          <div>
            <el-table
              :data="form.orderClassRuleList" 
              ref="filterTable"
              :inline="true"
              :label-position="labelPosition"
              :row-style="{height: '47px'}"
            >
              <el-table-column label="序号" align="left" type="index" width="80"/>
              <el-table-column label="规则类型" align="left" prop="ruleType" min-width="140">
                <template slot-scope="scope">
                  {{ getRuleType(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column label="订货品种数从" align="right" prop="ordersFrom" min-width="130">
              </el-table-column>
              <el-table-column label="订货品种数至" align="right" prop="ordersTo" min-width="130">
              </el-table-column>
              <el-table-column label="收货地区" align="left" prop="receiveArea" min-width="280">
                <template slot-scope="scope">
                  <el-tooltip placement="top">
                    <div slot="content" style="min-width: 160px; max-height:236px; overflow: auto;">
                      <ul style="list-style-type: none; padding-left:0;">
                        <li style="height: 22px; line-height: 22px; font-size: 14px; font-weight: 400;" v-for="item in scope.row.areaList" :key="item.id">{{ item.areaName }}</li>
                      </ul>
                    </div>
                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.receiveArea ? scope.row.receiveArea.length >= 20 ? scope.row.receiveArea.slice(0, 20) + '...' : scope.row.receiveArea : '' }}</span>
                  </el-tooltip>
                  <!-- <div style="width: 260px; height= 400px; overflow: auto;">
                    <el-popover
                      placement="right"
                      width="400"
                      trigger="hover">
                      <el-table :data="scope.row.areaList" height="360">
                        <el-table-column align="center" property="areaName" label="地址"></el-table-column>
                      </el-table>
                      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" slot="reference">{{ scope.row.receiveArea }}</span>
                    </el-popover>
                  </div> -->
                  
                </template>
              </el-table-column>
              <el-table-column label="最低起运总量" align="right" prop="minShipmentTotal" min-width="130">
              </el-table-column>
              <el-table-column label="最低免运费总量" align="right" prop="minFreefreightTotal" min-width="130">
              </el-table-column>
              <el-table-column label="最低免运费总金额(元)" align="right" prop="minFreefreightAmount" min-width="170">
              </el-table-column>
            </el-table>
          </div>

        </div>
      <!-- </el-form> -->
      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="primary" @click="cancel">返回</el-button>
          <!-- <el-button type="primary" :loading="saveloading" @click="save">确认</el-button> -->
        </div>
      </div>

    </div>
  </div>
 </template>

<script>
import { isEmpty } from 'element-ui/src/utils/util';
import {orderGoodsDetail, getDivisionTree} from '@/api/basic/orderGoodsClas.js'
import {getTimeSeconds} from '@/utils/index.js'

export default {
  name: 'OrderGoodsClassifyDetail',
  dicts: ['order_class_status', 'order_rule_type'],
  data() {
    return {
      mountedTime: undefined, // mounted时间
      activatedTime: undefined, // activated时间
      height: 130,
      orderClassId: this.$route.query.orderClassId, // 订货分类id
      open: false, // 是否显示弹窗
      saveloading: false,
      labelPosition: "right",     // 表单label对齐方式
      form: {
        name: undefined, // 分类名称
        status: undefined, // 状态
        remark: undefined, // 备注
        orderClassRuleList: [], // 订货规则
      },
    }
  },
  created() {
    
  },
  mounted() {
    this.mountedTime = new Date();
    this.orderClassId = this.$route.query.orderClassId; // 订货分类id
    this.orderGoodsDetail();
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  activated() {
    let isNew = false; // 默认不是新的
    if (this.orderClassId !== this.$route.query.orderClassId) {
      isNew = true; // 新的
    }
    this.orderClassId = this.$route.query.orderClassId; // 订货分类id
    this.activatedTime = new Date();
    // 得到秒数
    let seconds = getTimeSeconds(this.mountedTime, this.activatedTime);
    if (seconds >= 1 && isNew == true) {
      this.orderGoodsDetail();
    }
    // 解决表格设置固定高度导致列设置fixed后重新进来会错行问题
    this.tableHeight();
  },
  
  methods: {

    tableHeight() {
      this.$nextTick(() => {
        let height = document.body.clientHeight - 90 - 40;// - 62 - 20;
        // 查询表单高度
        let s_height = document.getElementById('ruleTop').clientHeight;
        // 按钮容器高度
        // let btns_height = document.getElementById('comTabel').clientHeight;
        // 计算表格的高度
        this.height = height - s_height - 20 - 64;
      });
    },

    /**
     * 获取订货分类详情
     */
    orderGoodsDetail() {
      orderGoodsDetail({orderClassId:this.orderClassId}).then(res => {
        if (res.code === 200) {
          this.form = res.data;
        }
      });
    },

    /**
     * 得到规则
     * @param {*} row 
     */
    getRuleType(row) {
      let show = '';
      this.dict.type.order_rule_type.some((item) => {
        if (item.value === row.ruleType) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 根据状态编码得到名称
     * @param {*} ste 
     */
    getStatus(ste) {
      let show = '';
      this.dict.type.order_class_status.some((item) => {
        if (item.value === ste) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    cancel() {
      const obj = { path: "/basicData/orderGoodsClassify" };
      this.$tab.closeOpenPage(obj);
    },

    
  },
}
</script>

<style lang="scss" scoped>
.dialog-main {
  display: flex;
  flex-direction: row;

  .dialog-left {
    flex: 1;
    // background-color: red;
    display: flex;
    flex-direction: column;
    .left-area {
      display: inline-block;
      width: 330px;
      // width:100%;
      height: 300px;
      margin-top: 5px;
      border: 1px solid #e5e6e7;
      background: #FFFFFF none;
      border-radius:4px;
      overflow: auto;
    }
  }
  .dialog-right {
    flex: 1;
    // background-color: orange;
    .right-top {
      margin-top: 37px;
      margin-bottom: 30px;
      display: inline-block;
    }
    ::v-deep.el-table__header-wrapper {
      border: 0;
      height:0;
    }
    ::v-deep.el-table__cell {
      border: 0;
    }
    
    ::v-deep.el-table .cell {
      line-height: 28.5px;
    }
    .right-bottom {
      height: 312px;
      overflow: auto;
      // background-color: lightcoral;
      .table-column-area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex
        .table-column-area-span {
          // flex: 3;
          height: 28.5px;
          font-size: 14px;
          font-weight: 400;
        }
        
        .table-column-area-btn {
          // flex: 1;
        }
      }
    }
  }
}
</style>